<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <base th:href="${#request.getContextPath()}+'/'">
  <title>登录</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="login" method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" value="test" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" value="123456" required lay-verify="required" placeholder="请输入密码" autocomplete="off"  class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux"><img src="captcha_img" onclick="changeImg(this)"></div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  layer.msg('Hello World');
});
</script>

<script>
  // 点击验证码时，生成新的验证码
  function changeImg(obj) {
      obj.src = "captcha_img?count=1&timestamp=" + new Date().getTime();
  }
</script>
</body>
</html>
